<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="app">

        <ul class="item">
            <div class="pic">
            <img src="./img/1.jpeg" alt="">
        </div>
            <li v-for="item in nameList">
                姓名：{{item.name}}
            </li>
            <li v-for="item in nameList">
                年龄：{{item.age}}
            </li>
            <li v-for="item in nameList">
                性别：{{item.sex}}
            </li>
            <li v-for="item in nameList">
                总分{{item.score}}
            </li>
        </ul>


        <ul class="item">
            <div class="pic">
            <img src="./img/2.jpeg" alt="">
        </div>
            <li v-for="item in nameList2">
                姓名：{{item.name}}
            </li>
            <li v-for="item in nameList2">
                年龄：{{item.age}}
            </li>
            <li v-for="item in nameList2">
                性别：{{item.sex}}
            </li>
            <li v-for="item in nameList2">
                总分{{item.score}}
            </li>
        </ul>


        <ul class="item">
            <div class="pic">
            <img src="./img/3.jpeg" alt="">
        </div>
            <li v-for="item in nameList3">
                姓名：{{item.name}}
            </li>
            <li v-for="item in nameList3">
                年龄：{{item.age}}
            </li>
            <li v-for="item in nameList3">
                性别：{{item.sex}}
            </li>
            <li v-for="item in nameList3">
                总分{{item.score}}
            </li>
        </ul>
    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const vm =Vue.createApp({
        data(){
            return{
                nameList:[
                    {name:'张三',age:'20',sex:'男',score:'230'}
            ],
                nameList2:[{name:'李四',age:'20',sex:'男',score:'190'}
            ],
                nameList3:[{name:'王五',age:'20',sex:'男',score:'240'}]
            }
        }
    }).mount('#app')
</script>
</html>